<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车广场</title>
    <link rel="stylesheet" href="./download-1/iconfont/iconfont.css">
    <link rel="stylesheet" href="./download-1 2/font_1974749_v4t2qyp4nwk/iconfont.css">
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        div.outer{
            width: 750px;
            height: 1300px;
            background-color: #ccc;
            margin: 0 auto;
        }
        header{
            width: 750px;
            height: 55px;
 
            background-color: #f5f5f5;
            position: fixed;
            top: 0px;
        }
        div.outer header div.header_left{
            width: 87.5px;
            height: 55px;
            line-height: 55px; 
         
            
        }
        div.outer header div.header_left span{
            width: 25px;
            height: 25px;
            /* background-color: white; */
            
        }
        div.outer header div.header_left a{
            font-size: 1.125rem;
            color: #333;
        }
        div.outer header div.text{
            width: 90px;
            height: 55px;
          
            line-height: 55px;
            margin-left: 350px;
            margin-top: -55px;
           
        }
        div.outer header div.text span{
            font-size: 20px;
            color: #333;
        }
       
        
        article{
            width: 750px;
            height: 1300px;
            /* background-color: pink; */
        }
        div.outer article div.article_top1{
            width: 100%;
            height: 46.25px;
            margin-top: 65px;
            background-color: #f5f5f5;
        }
        div.outer article div.article_top2{
            height: 56px;
            background-color: #e3e4e6;
            display: flex;
         
        }
        div.outer article div.article_top2 div.article_top21{
            width: 720px;
            height: 35px;
            margin:  auto;
            background-color: white;
            border-radius: 25px;
            margin-bottom: 10px;

        }
        div.outer article div.article_top2 div.article_top21 span{
            width: 30px;
            height: 30px;
            display: inline-block;
            line-height: 30px;
            margin-left: 5px;
        }
        div.outer article div.article_center1{
            width: 750px;
            height: 98px;
            background-color: white;
           
            display: flex;
            justify-content: space-between;  
        }
        div.outer article div.article_center1 div{
           width: 150px;
           height: 68px;
           display: flex; 
           flex-direction: column;
           justify-content: space-between;
           background-color: white;
           border-right: 1px solid #f0f0f0;
           margin: auto;
            
        }
        div.outer article div.article_center1 div img{
            width: 45px;
            height: 45px;
            margin: auto;
        } 
        div.outer article div.article_center1 div p{
            margin: auto;
        }
        div.outer article div.article_center2{
            width: 750px;
            height: 614px;
            background-color: white;
           
           
        }
        div.outer article div.article_center2 div img {
           width: 750px;
           height: 500px;
           margin-top: 5px;
            
        }
        div.outer article div.article_center2 div.article_center21{
            width: 750px;
            height: 42.5px;
            display: flex;
           
            justify-content: space-between;
           
            
        }
        div.outer article div.article_center2 div.article_center21 div{
            width: 250px;
            height:24.5px ;
            flex-direction: column;
            justify-content: space-between;
            background-color: white;
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            margin: auto;
        }
        div.outer article div.article_center2 div.article_center21 div span{
           font-size: 35px;
            line-height: 20px;
            float: left; 
            margin-left: 100px;
           
        }
        footer{
            width: 780px;
            height: 61.25px;
            /* background-color: blue; */
            position: fixed;
            bottom: -11px;
            margin-left: -15px;
        }
        div.outer footer div.footer{
            width: 750px;
            height: 46.25px;
            background-color: white;
            
            display: flex;
            justify-content: space-between; 

        }
        div.outer footer div.footer div{
           width: 156px;
           height: 46.25px;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           background-color: white;
           border-right: 1px solid #f0f0f0;
           margin: auto;
        }
        div.outer footer div.footer div img{
            width: 30px;
            height: 30px;
            margin: auto;
        } 
        div.outer footer div.footer div p{
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <header>
           <div class="header_left">
               
               <span class="iconfont icon-arrow-left-bold" > </span>
               <a href="" >返回</a>  
           </div>
           <div class="text">
               <span>汽车广场</span>
           </div>
           
        </header>
        <article>
            <div class="article_top1"></div>
            <div class="article_top2">
                <div class="article_top21">
                    <span class="iconfont icon-icon-test"></span>
                    <i>搜索你感兴趣的汽车</i>
                </div>
            </div>
            <div class="article_center1">
                <div>
                    <div>
                        <img src="../d11-6css/day11/daV.png" alt="">
                    </div>
                    <div>
                        <p>大V榜</p>
                       
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d11-6css/day11/xinche.png" alt="">
                    </div>
                    <div>
                        <p>新车上市</p>
                       
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d11-6css/day11/reyi.png" alt="">
                    </div>
                    <div>
                        <p>热议车榜</p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d11-6css/day11/reche.png" alt="">
                    </div>
                    <div>
                        <p>热车排行</p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d11-6css/day11/dijia.png" alt="">
                    </div>
                    <div>
                        <p>低价查询</p>
                    </div>
                </div>
                
            </div>
            <div class="article_center2">
                <div>
                    <img src="../d12-7css/微博1.png" alt="">

                </div>
                <div class="article_center21">
                   <div >
                    <span class="iconfont icon-share"></span>
                         <i>46</i>
                   </div>
                   <div> 
                       <span class="iconfont icon-comment"></span>
                       <i>102</i>
                   </div>
                   <div> 
                       <span class="iconfont icon-good"></span>
                       <i>301</i>
                   </div>
                </div>
                <div>
                    <img src="../d12-7css/微博2.png" alt="">

                </div>
                <div class="article_center21">
                   <div >
                    <span class="iconfont icon-share"></span>
                         <i>55</i>
                   </div>
                   <div> 
                       <span class="iconfont icon-comment"></span>
                       <i>100</i>
                   </div>
                   <div> 
                       <span class="iconfont icon-good"></span>
                       <i>400</i>
                   </div>
                </div>
            </div>
        </article>
        <footer>
          <div class="footer">
              <div>
                  <div>
                      <img src="../d11-6css/day11/shouye.png" alt="">
                  </div>
                  <div>
                      <p>首页</p>
                  </div>
              </div>
              <div>
                  <div>
                      <img src="../d11-6css/day11/shiping.png" alt="">
                  </div>
                  <div>
                      <p>视频</p>
                  </div>
              </div>
              <div>
                  <div>
                      <img src="../d11-6css/day11/fabu.png" alt="">
                  </div>
                  <div>
                      <p>发布</p>
                  </div>
              </div>
              <div>
                  <div>
                      <img src="../d11-6css/day11/zhaoche.png" alt="">
                  </div>
                  <div>
                      <p>找车</p>
                  </div>
              </div>
              <div>
                  <div>
                      <img src="../d11-6css/day11/huati.png" alt="">
                  </div>
                  <div>
                      <p>话题</p>
                  </div>
              </div>
          </div>

        </footer>
    </div>
</body>
</html>